<template>
  <Dialog :title="title" :model-value="visible" width="600px" :before-close="closeForm">
    <Form
      :schema="schema"
      :model="flow"
      @register="formRegister"
      label-width="120px"
      :is-col="false"
      :rules="rules"
    />
    <template #footer>
      <el-space>
        <BaseButton :loading="loading" type="primary" @click="save">确定</BaseButton>
        <BaseButton @click="resetForm">重置</BaseButton>
      </el-space>
    </template>
  </Dialog>
</template>

<script>
import { DictItemDic } from '@/flow/config/flowConfig'
import * as flowApi from '@/flow/api/flow'
import { Dialog } from '@/components/Dialog'
import { Form } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
const { formRegister, formMethods } = useForm()
export default {
  components: {
    Dialog,
    Form
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      DictItemDic,
      title: '复制流程',
      source: {},
      loading: false,
      schema: [],
      flow: {
        FlowName: null,
        FlowType: null,
        Remark: null,
        IsCreateNew: false
      },
      rules: {
        FlowName: [
          {
            required: true,
            message: '流程名不能为空！',
            trigger: 'blur'
          }
        ],
        FlowType: [
          {
            required: true,
            message: '流程分类不能为空！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {},
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  methods: {
    formRegister,
    initScheme() {
      this.schema = [
        {
          field: 'IsCreateNew',
          label: '复制方式',
          component: 'RadioGroup',
          componentProps: {
            options: [
              {
                label: '复制一份',
                value: true
              },
              {
                label: '在原版本上修改',
                value: false
              }
            ]
          },
          on: {
            change: (val) => {
              if (val) {
                this.flow.FlowType == val
                this.initScheme()
              }
            }
          }
        },
        {
          field: 'FlowName',
          label: '流程名',
          component: 'Input',
          componentProps: {
            maxLength: 50,
            placeholder: '流程名'
          }
        },
        {
          field: 'FlowType',
          label: '流程分类',
          component: 'TreeDicItem',
          componentProps: {
            placeholder: '流程分类',
            disabled: this.flow.IsCreate,
            dicId: DictItemDic.flowType
          }
        },
        {
          field: 'Remark',
          label: '备注',
          component: 'Input',
          componentProps: {
            maxLength: 255,
            type: 'textarea',
            placeholder: '流程名'
          }
        }
      ]
    },
    async save() {
      const data = await formMethods.validate()
      if (data == null) {
        return
      }
      this.copy(data)
    },
    async copy(data) {
      data.Id = this.id
      await flowApi.Copy(data)
      this.$message({
        message: '复制成功!',
        type: 'success'
      })
      this.$emit('update:visible', false)
      this.$emit('close', true)
    },
    async reset() {
      this.loading = false
      const data = await flowApi.Get(this.id)
      this.source = data
      this.flow = {
        FlowName: data.FlowName,
        FlowType: data.FlowType,
        Remark: data.Remark,
        IsCreateNew: false
      }
      this.title = '复制流程:' + data.FlowName
      this.initScheme()
    },
    closeForm() {
      this.$emit('update:visible', false)
      this.$emit('close', false)
    },
    resetForm() {
      this.flow = {
        FlowName: this.source.FlowName,
        FlowType: this.source.FlowType,
        Remark: this.source.Remark,
        IsCreateNew: false
      }
      formMethods.setValues(this.flow)
    }
  }
}
</script>
